<template>
  <div>
    <Nav :title="$route.name"></Nav>
    <div class="container">

      <div class="no_address" v-show="!list.length">
      <div class="no_img">
          <img src="../../assets/public_image_normal_3.png" alt="">
      </div>
      <p>你还未添加任何地址</p>
      <div class="now_add" @click="$router.push('/addaddress')">
        立即添加
      </div>
      </div>
        <van-address-list 
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        add-button-text="+添加新地址"
        @select="select"
      />
    </div>
    </div>

  </div>
</template>

<script>
import Nav from '../../components/Nav.vue'
import { fetchAddressList,fectUpdateAddress} from '_api'
import { getToken } from '_utils/token.js'
import { List, Toast } from 'vant'
export default {
  components: { Nav },
  data () {
    return {
      chosenAddressId: '',
      list: [
        // {
        //   id: '1',
        //   name: '张三',
        //   tel: '13000000000',
        //   address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        //   isDefault: true
        // },
        // {
        //   id: '2',
        //   name: '李四',
        //   tel: '1310000000',
        //   address: '浙江省杭州市拱墅区莫干山路 50 号'
        // }
      ]
    }
  },
  created () {
    this.fetchAddressList()
  },
  methods: {
    fetchAddressList () {
      fetchAddressList({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          // 字段映射 linkMan => name
          // mobile => tel
          const contact = res.data.data.result
          console.log(contact)
          const list = [] // 数组接受映射的数组
          contact.forEach(item => {
            console.log(item)
            const address = {} // 接受映射好的对象
            for (const key in item) {
              if (key === 'linkMan') {
                address.name = item[key]
              } else if (key === 'mobile') {
                address.tel = item[key]
              } else {
                address[key] = item[key]
              }
            }
            console.log(address)
            list.push(address)
            this.list = list
          })
          // 默认id
          const defauContact = list.find(address => address.isDefault)
          this.chosenAddressId = defauContact.id
        }
      })
    },
    // 点击小圆点更改默认地址
    select (params) {
      console.log(params)
      this.list.id = params.id
      this.list.isDefault = true
      fectUpdateAddress({
        token: getToken(),
        ...this.list
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.fetchAddressList()
          Toast('更改默认地址成功')
        }
      })
    },
    // 添加联系人
    onAdd () {
      this.$router.replace('/addaddress')
    },
    // 编辑
    onEdit (params) {
      console.log(params)
      this.$router.replace({
        path: '/addEdit',
        query: {
          contactId: params.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-top: 1.2rem;
}
.van-button--danger {
  background: linear-gradient(-90deg, #ff8f00, #f50 97%);
}
.no_address{
  .no_img{
    width: 3.773333rem;
    height: 4rem;
    margin: .4rem auto .533333rem;
    img{
      width: 100%;
    }
  }
  p{
    text-align: center;
    font-size: .4rem;
    font-weight: 700;
  }
  .now_add{
    width: 3.2rem;
    height: .96rem;
    text-align: center;
    line-height: .96rem;
    background-color: #fff;
    color:#999;
    font-size: .4rem;
    border-radius: .4rem;
    margin: .533333rem auto .133333rem;
  }
}
</style>
